<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-header">
            <h3>插入电影数据</h3>
          </div>
          <div class="card-body">
            <form @submit.prevent="insertMovieData">
              <div class="form-group">
                <label for="code">电影代码</label>
                <input
                  type="text"
                  class="form-control"
                  id="code"
                  v-model="formData.code"
                  placeholder="请输入电影代码"
                  required
                />
              </div>
              <div class="form-group">
                <label for="movie_name">电影名称</label>
                <input
                  type="text"
                  class="form-control"
                  id="movie_name"
                  v-model="formData.movie_name"
                  placeholder="请输入电影名称"
                  required
                />
              </div>
              <div class="form-group">
                <label for="avg_audience_count">平均观众数</label>
                <input
                  type="number"
                  class="form-control"
                  id="avg_audience_count"
                  v-model="formData.avg_audience_count"
                  placeholder="请输入平均观众数"
                  required
                />
              </div>
              <div class="form-group">
                <label for="release_time">上映时间</label>
                <input
                  type="date"
                  class="form-control"
                  id="release_time"
                  v-model="formData.release_time"
                  required
                />
              </div>
              <div class="form-group">
                <label for="avg_boxoffice">平均票房</label>
                <input
                  type="number"
                  class="form-control"
                  id="avg_boxoffice"
                  v-model="formData.avg_boxoffice"
                  placeholder="请输入平均票房"
                  required
                />
              </div>
              <div class="form-group">
                <label for="boxoffice">总票房</label>
                <input
                  type="number"
                  class="form-control"
                  id="boxoffice"
                  v-model="formData.boxoffice"
                  placeholder="请输入总票房"
                  required
                />
              </div>
              <div class="form-group">
                <label for="rank">排名</label>
                <input
                  type="number"
                  class="form-control"
                  id="rank"
                  v-model="formData.rank"
                  placeholder="请输入排名"
                  required
                />
              </div>
              <button type="submit" class="btn btn-primary">插入数据</button>
            </form>

            <div v-if="message" class="mt-4 alert" :class="messageClass">
              {{ message }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        code: '001',
        movie_name: '电影A',
        avg_audience_count: 50,
        release_time: '2023-01-01',
        avg_boxoffice: 50,
        boxoffice: 80,
        rank: 1,
      },
      message: '',
      messageClass: '',
    };
  },
  methods: {
    async insertMovieData() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/add_movie', {
          params: this.formData,
        });

        if (response.data.message === "插入成功") {
          this.message = response.data.message;
          this.messageClass = 'alert-success';
        } else {
          this.message = response.data.message || '数据插入失败，请稍后重试。';
          this.messageClass = 'alert-danger';
        }
      } catch (err) {
        this.message = '请求失败，请检查网络连接或稍后重试。';
        this.messageClass = 'alert-danger';
      }

      setTimeout(() => {
        this.message = '';
      }, 3000);
    },
  },
};
</script>

<style scoped>
.container {
  margin-top: 50px;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  background-color: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.card-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.btn-primary {
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.alert {
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 20px;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}
</style>